<template>
  <dialog-edit :visible.sync="dialogVisible" :title="$attrs.title" ref="userManageEdit"
               width="850" @save="save" :remember="false" :destroyOnClose="true"
               height="270px" :saveFlag="true" :escClosable="true" :closeFlag="true" :saveLoading="saveLoading">
    <template v-slot:body>
      <div style="margin-bottom: 10px">
        <vxe-form :data="formData" :span="24" title-align="right" :rules="formRules"
                  :title-width="150" ref="formRefs">
          <div class="allq">
            <vxe-form-item title="原密码" field="password">
              <vxe-input v-model="formData.password" placeholder="请输入原密码" :rows="8"></vxe-input>
            </vxe-form-item>
            <vxe-form-item title="新密码" field="newpassword">
              <vxe-input v-model="formData.newpassword" placeholder="请输入新密码" :rows="8"></vxe-input>
            </vxe-form-item>
            <vxe-form-item title="再次输入新密码" field="oncenewpassword">
              <vxe-input v-model="formData.oncenewpassword" placeholder="请输入再次输入新密码" :rows="8"></vxe-input>
            </vxe-form-item>
          </div>
        </vxe-form>
      </div>
    </template>
  </dialog-edit>
</template>

<script>
  import dialogEdit from '@/components/element/dialogEdit'
  import userApi from '@/api/organizationApi/userApi.js'
  import user from "@/store/modules/user";
  import {mapActions} from "vuex";
  export default {
    name: "TaskEditDialog",
    components: {
      dialogEdit
    },
    props: {
      visible: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    data () {
      return {
        saveLoading: false,
        formData: {},
        formRules: {
          password: [
            { required: true, message: '原密码必填', trigger: 'change' },
            // { validator: this.validator().AcceptidValidator, trigger: 'blur' }
          ],
          newpassword: [
            { required: true, message: '新密码必填', trigger: 'change' },
          ],
          oncenewpassword: [
            { required: true, message: '再次输入新密码必填', trigger: 'change' },
          ]
        }
      }
    },
    computed: {
      dialogVisible: {
        get: function () {
          return this.visible
        },
        set: function (value) {
          this.$emit('update:visible', value)
        }
      },
    },
    methods: {
      ...mapActions(['Logout']),
      save () {
        this.$refs.formRefs.validate().then(_ => {
          if (this.formData.newpassword === this.formData.oncenewpassword) {
            if (this.formData.newpassword === this.formData.password) {
              return this.$XModal.message({ message: '新密码不能为旧密码', status: 'warning' })
            }
            if (this.formData.newpassword.length < 6 || this.formData.newpassword.length > 20) {
              return this.$XModal.message({ message: '密码长度至少6位最多20位', status: 'warning' })
            }
            let a = {
              Id: this.$store.state.user.id,
              OldPassword: this.formData.password,
              NewPassword: this.formData.newpassword,
              Confpwd: this.formData.oncenewpassword,
            }
            this.saveLoading = true
            userApi.UpdateUserPwd(a).then(res => {
              this.saveLoading = false
              if (!!res) {
                this.$XModal.message({ message: res.message, status: 'warning' })
                if (res.code === 1) {
                  this.$XModal.alert('密码已修改，请退出后重新登录', '提示').then(async rs => {
                    if (await this.Logout()) {
                      this.$router.push('/view/login');
                      this.$message.success('退出登录成功');
                    }
                  })
                }
              } else {
                this.$XModal.message({ message: '未知异常', status: 'warning' })
              }
            }).catch(res => {
              this.saveLoading = false
              console.log(res);
            })
          } else {
            this.$XModal.message({ message: '两次新密码不一致', status: 'warning' })
          }
        }).catch(_ => {
        })
      }
    },
    watch: {
      dialogVisible: {
        handler (n, o) {
          if (n) {

          }
        }
      }
    }
  }
</script>

<style scoped>
  .wange >>> .w-e-text{
    overflow-y: hidden;
  }
  .allq >>> .vxe-form--item {
    width: 100%;
  }
</style>
